<!-- 
  一、Vue的组件由三部分组成
  1、template:编写HTML页面
  2、script:编写脚本
  3、style:编写样式的
  二、<template>
  1、vue2中由一个规定：必须要有一个根标签，vue3中可以由多个根
  2、注意点：如果你的vocode中vetur还没有卸载干净，或者vetur配置还在监视vue文件
  3、在Vue3中新组件Fragment
  三、script
  1、如果使用的是vue3+ts开发，就必须要在script标签中添加一个lang，值为ts
  2、如果你要采用组合式API的方式来作为组合式API入口函数，可以使用两种方式
   1）setup函数方式
     export default{
      setup(){
        
      }
    }
    2) 使用<script lang="ts" setup>

 -->
 <template>
    <div>
      <div>姓名:{{name}}</div>
      <div>年龄:{{age}}</div>
    </div>
 </template>
 <script lang="ts" setup>
    let name:string="monica"
    let age:number=39
    // export default{
    //   setup(){
    //     //在setup函数中直接定义的变量属于非响应式数据
    //     let name:string="Giles"
    //     let age:number=39
    //     return{
    //       name,age
    //     }
    //   }
    // }
 </script>
 <style></style>